
<div class="page page-table" data-ng-controller="tableCtrl">

    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Dynamic Table</h2>
        </div>
        <div class="col-md-12">
            <section class="panel panel-default table-dynamic">
                <div class="table-filters">
                    <div class="row">
                        <div class="col-sm-4 col-xs-6">
                            <form>
                                <input type="text"
                                       placeholder="Search..."
                                       class="form-control"
                                       data-ng-model="searchKeywords"
                                       data-ng-keyup="search()">
                            </form>
                        </div>
                        <div class="col-sm-3 col-xs-6 filter-result-info">
                            <span>
                                Showing {{filteredStores.length}}/{{stores.length}} entries
                            </span>              
                        </div>
                    </div>
                </div>

                <table class="table table-bordered table-striped table-responsive">
                    <thead>
                        <tr>
                            <th><div class="th">
                                Store Name
                                <span class="fa fa-angle-up"
                                      data-ng-click=" order('name') "
                                      data-ng-class="{active: row == 'name'}"></span>
                                <span class="fa fa-angle-down"
                                      data-ng-click=" order('-name') "
                                      data-ng-class="{active: row == '-name'}"></span>
                            </div></th>
                            <th><div class="th">
                                Price
                                <span class="fa fa-angle-up"
                                      data-ng-click=" order('price') "
                                      data-ng-class="{active: row == 'price'}"></span>
                                <span class="fa fa-angle-down"
                                      data-ng-click=" order('-price') "
                                      data-ng-class="{active: row == '-price'}"></span>
                            </div></th>
                            <th><div class="th">
                                Sales (in 7 days)
                                <span class="fa fa-angle-up"
                                      data-ng-click=" order('sales') "
                                      data-ng-class="{active: row == 'sales'}"></span>
                                <span class="fa fa-angle-down"
                                      data-ng-click=" order('-sales') "
                                      data-ng-class="{active: row == '-sales'}"></span>
                            </div></th>
                            <th><div class="th">
                                Rating
                                <span class="fa fa-angle-up"
                                      data-ng-click=" order('rating') "
                                      data-ng-class="{active: row == 'rating'}"></span>
                                <span class="fa fa-angle-down"
                                      data-ng-click=" order('-rating') "
                                      data-ng-class="{active: row == '-rating'}"></span>
                            </div></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr data-ng-repeat="store in currentPageStores">
                            <td>{{store.name}}</td>
                            <td>{{store.price}}</td>
                            <td>{{store.sales}}</td>
                            <td>{{store.rating}}</td>
                        </tr>
                    </tbody>
                </table>

                <footer class="table-footer">
                    <div class="row">
                        <div class="col-md-6 page-num-info">
                            <span>
                                Show 
                                <select data-ng-model="numPerPage"
                                        data-ng-options="num for num in numPerPageOpt"
                                        data-ng-change="onNumPerPageChange()">
                                </select> 
                                entries per page
                            </span>
                        </div>
                        <div class="col-md-6 text-right pagination-container">
                            <pagination class="pagination-sm"
                                        ng-model="currentPage"
                                        total-items="filteredStores.length"
                                        max-size="4"
                                        ng-change="select(currentPage)"
                                        items-per-page="numPerPage"
                                        rotate="false"
                                        previous-text="&lsaquo;" next-text="&rsaquo;"
                                        boundary-links="true"></pagination>
                        </div>
                    </div>
                </footer>
            </section>
        </div>
    </div>
    
</div>